<template>
  <div class="centermap">
    <div class="maptitle">
      <!--      <div class="zuo"></div>-->
      <!--      <span class="titletext">{{ title }}</span>-->
      <!--      <div class="you"></div>-->
    </div>

    <div class="mapwrap">
      <!-- 必须要设置div的高度 -->
      <baidu-map
          class="bm-view"
          :center="   {lng: 120.265263, lat: 31.553}"
          :zoom="14"
          :scroll-wheel-zoom="true"
          @ready="handler"
      >
        <!--信息窗体-->
        <bm-info-window :position="{lng: info_lng, lat: info_lat}" title="设备详细信息" :show="infoWindow.show"
                        style="background-color:rgba(255,255,255,0);">
          <p>
            经纬度：{{ "" + info_lng + ", " + info_lat }}
          </p>
          <el-button><a href="" target="_blank">跳转到设备管理</a>
          </el-button>
        </bm-info-window>

        <bm-marker v-for="item of pointData"
                   :position="{lng: item['lng'], lat: item['lat']}"
                   :icon="{url: 'src/assets/img/device.png',
                       size: {width: 40 ,height:80}}"
                   @click="infoWindow.show = false;info_lng = item['lng'] ;info_lat=item['lat'];infoWindow.show = true"
        ></bm-marker>
      </baidu-map>
    </div>
  </div>
</template>

<script setup lang="ts">
import styleJson from "@/assets/css/styleJson.json"
import {ref} from 'vue';

withDefaults(
    defineProps<{
      // 结束数值
      title: number | string;
    }>(),
    {
      title: "",
    }
);

let pointData = []
let info_lat = 31.555419
let info_lng = 120.214774

// 设置初始样式
const handler = ({BMap, map}) => {
  map.setMapStyleV2({styleJson: styleJson});
}
const infoWindow = ref({
  show: false,
  contents: ''
});



const getPoint = () => {


  const coordinates = [
    {lng: 120.265263, lat: 31.553}, // 西园里
    {lng: 120.26591, lat: 31.558605}, // 隐秀苑
    {lng: 120.255767, lat: 31.555966}, // 环湖苑
    {lng: 120.249945, lat: 31.552615}, // 湖滨南苑
    {lng: 120.249917, lat: 31.555388}, // 湖滨北苑
    {lng: 120.216975, lat: 31.555419}, // 湖山湾家园A区
    {lng: 120.216975, lat: 31.5556}, // 湖山湾家园B区
    {lng: 120.252051, lat: 31.553734}  // 无锡（国家）工业设计园
  ];
  pointData = coordinates
  return coordinates;
}
getPoint()

</script>

<style scoped lang="scss">

::v-deep {

  .BMap_cpyCtrl {
    display: none;
  }

  .anchorBL {
    display: none;
  }
}

.centermap {
  margin-bottom: 30px;

  .bm-view {
    width: 100%;
    height: 650px;
  }

  .maptitle {
    height: 60px;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    box-sizing: border-box;

    .titletext {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
      background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.8525390625%, #01aaff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 10px;
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }

    .zuo {
      background: url("@/assets/img/xiezuo.png") no-repeat;
    }

    .you {
      background: url("@/assets/img/xieyou.png") no-repeat;
    }
  }

  .mapwrap {
    height: 500px;
    width: 100%;
    // padding: 0 0 10px 0;
    box-sizing: border-box;
    position: relative;

    .quanguo {
      position: absolute;
      right: 20px;
      top: -46px;
      width: 80px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 10px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5), 0 0 6px rgba(0, 237, 237, 0.4);
      z-index: 10;
    }
  }
}
</style>